<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../../org/angular.min.js"></script>
    <script src="../../org/jquery.min.js"></script>
</head>

<body ng-app="app" ng-controller="ctrl">
    <span ng-bind="name"></span>
    <button ng-click="change()">angular方法</button>
    <button id="jq">jquery方法</button>
    <script>
        var m = angular.module('app', []);
        m.controller('ctrl', ['$scope', function($scope) {
            $scope.name = '老周';
            // 原生方法会触发angular的脏检查机制，让修改后的数据更新，不是绑定在$scope下的方法虽然数据已经被修改了，但是没有触发脏检查机制，导致视图没有更新，想要更新视图，需要单独调用$scope.$apply() 触发脏检查机制更新视图
            $scope.change = function() {
                $scope.name = '积云教育';
            }
            $('#jq').click(function() {
                $scope.name = 'jquery修改生效';
                $scope.$apply();
            })
        }])
    </script>
</body>

</html>
